<template>
  <div class="container">
    <div class="heade">
      <div class="header">
        <span class="text1">仓库管理</span>
        <!-- 收起筛选/展开筛选 -->
        <span class="text4" @click="isShow = !isShow">
          <i class="el-icon-arrow-down" v-if="!isShow">展开筛选</i>
          <i class="el-icon-arrow-up" v-if="isShow">收起筛选</i>
        </span>
        <el-button type="primary" size="mini" class="info" @click="searchWareHouse">查询结果</el-button>
      </div>
      <!-- 以下div为筛选查询 -->
      <div class="heade-text" v-show="isShow">
        <el-form
          ref="form"
          :model="form"
          label-width="100px"
          class="heade-form"
        >
          <el-form-item label="输入搜索:">
            <el-input
              v-model="form.name"
              placeholder="仓库名称"
              style="width: 260px"
            ></el-input>
          </el-form-item>
          <el-form-item label="负责人员">
            <el-input
              v-model="form.employeeName"
              placeholder="全部"
              style="width: 200px"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="between">
      <div class="header">
        <span class="text">数据列表</span>
        <el-button type="button" @click="getWareHousePer()"
          >新增仓库</el-button
        >
        <el-button type="button" @click="reflush">刷新</el-button>
        <el-dialog
          title=""
          :visible.sync="dialogVisible"
          width="40%"
          :before-close="handleClose"
        >
          <el-form ref="form" :model="warehouse" label-width="80px">
            <el-form-item label="仓库名称">
              <el-input v-model="warehouse.name"></el-input>
            </el-form-item>
            <el-form-item label="仓库类型">
              <el-input v-model="warehouse.warehouseCategory"></el-input>
            </el-form-item>
            <el-form-item label="负责人">
              <el-select v-model="warehouse.employeeName" placeholder="请选择">
                <el-option
                  v-for="item in Position"
                  :key="item.id"
                  :label="item.username"
                  :value="item.username"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="仓库地址">
              <el-input v-model="warehouse.address"></el-input>
            </el-form-item>
          
            <el-form-item>
              <el-button type="primary" @click="onSubmit">提交</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
      <div class="between-table">
        <el-table
          :header-cell-style="{ fontSize: '14px', textAlign: 'center' }"
          :cell-style="{ fontSize: '12px', textAlign: 'center' }"
          ref="multipleTable"
          :data="tableData"
          border
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column fixed prop="name" label="仓库名" width="150">
          </el-table-column>
          <el-table-column
            prop="warehouseCategory"
            label="仓库类型"
            width="150"
          >
          </el-table-column>
          <el-table-column prop="address" label="地址" width="200">
          </el-table-column>
          <el-table-column prop="employeeName" label="负责人" width="250">
          </el-table-column>
          <el-table-column prop="status" label="状态" width="65">
            <el-switch
              v-model="value"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template scope="scope">
              <el-button
                type="text"
                @click="handleDelete(scope.row.id)"
                size="small"
                >删除</el-button
              >
              <el-button type="text" @click="handleEdit()" size="small"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px; display: flex">
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage3"
              :page-size="100"
              layout="prev, pager, next, jumper"
              :total="1000"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  created() {
    //页面一加载，调用方法
    this.reflush();
  },  
  data() {
    return {
      isShow: true,
      tableData: [
      ],
      Position: [
      ],
      // 弹窗显示控制属性
      dialogVisible: false,
      value: true,
      // 部门信息
      warehouse: {
        name: "",
        warehouseCategory: "",
        address: "",
        employeeName: "",
        status: 1,
      },
      form:{
        name:"",
        employeeName:""
      }
    };
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    handleEdit() {
      console.log(index, row);
    },
    handleDelete() {
      console.log(index, row);
    },
    async handleDelete(id) {
      //确认提示框
      const confirmResult = await this.$confirm(
        "此操作将永久删除该用户, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err); //用户确认删除，返回字符串 confirm //用户取消删除，返回字符串 cancel
      if (confirmResult != "confirm") {
        this.$message.info("已取消删除");
      } else {
        //确认删除
        const { data: res } = await this.$http.get("warehouse/delWareHouse", {
          params: { id: id },
        });
        console.log(res.data);
        if (res.data != "success") {
          this.$message.error("删除用户失败");
        } else {
          //隐藏添加对话框
          this.$message.success("删除用户成功");
          this.reflush();
        }
      }
    },
    onSubmit() {
      this.$refs.form.validate(async (valid) => {
        console.log("部门", this.warehouse);
        if (valid) {
          // 发起真正的提交
          const { data: res } = await this.$http.post(
            "warehouse/addWareHouse",
            this.warehouse
          );
          console.log(res.data);
          this.dialogVisible = false;
          this.reflush();
          if (res.data != "添加成功") {
            this.$message.error("添加失败");
          } else {
            //隐藏添加对话框
            this.$message.success("添加成功");
          }
        }
      });
    },
    // 查询
    async reflush() {
      const { data: resp } = await this.$http.get("warehouse/getWareHouse");
      this.tableData = resp.data;
      console.log(resp.data);
    },
    // 查询仓管
    async getWareHousePer() {
      this.dialogVisible = true;
      
      const { data: resp } = await this.$http.get("employees/getWareHousePer");
      this.Position = resp.data;
      console.log(this.Position);
    },
    // 模糊查询
    async searchWareHouse() {
      // 访问后端接口，实现查询
      console.log(this.form);
      console.log(this.form.name);
      const { data: res } = await this.$http.get("warehouse/searchWareHouse", {
        params: {
          name: this.form.name,
          deptname: this.form.employeeName,
        },
      });
      console.log("chaxunjieguo", res.data);
      this.tableData = res.data;
      // this.initCollevtionList();
      // console.log(this.collectionList);
    },
  },
};
</script>

<style>
.heade-text {
  border: 1px solid rgba(228, 228, 228, 1);
  text-align: center;
}

.heade-form {
  display: flex;
  position: relative;
  top: 12px;
}

.text1 {
  font-size: 14px;
  position: absolute;
  left: 12px;
}

.text2 {
  font-size: 12px;
  position: absolute;
  left: 100px;
  color: red;
}

.text3 {
  font-size: 12px;
  position: absolute;
  left: 180px;
  color: red;
}

.text4 {
  font-size: 12px;
  position: absolute;
  right: 140px;
  cursor: pointer;
}

.info1 {
  font-size: 14px;
  position: absolute;
  right: 70px;
  top: 14px;
}

.info {
  font-size: 14px;
  position: absolute;
  right: 12px;
  top: 14px;
}

.header {
  position: relative;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: rgba(243, 243, 243, 1);
  border: 1px solid rgba(228, 228, 228, 1);
}

.between .header {
  margin-top: 20px;
}

.column {
  font-size: 12px;
  margin-right: 5px;
}
</style>